<template>
  <div class="banner">
    <div class="header">
      <div class="add">
        <el-button type="primary" @click="addBanner">新增</el-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="list" border fit>
        <el-table-column label="编号" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>

        <el-table-column label="banner背景图" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.image_url" width="100%" height="100%"/>
          </template>
        </el-table-column>

        <el-table-column label="是否启用" align="center">
          <template slot-scope="scope">
            {{ scope.row.is_banner ==1 ? '启用': '未启用' }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.created_at }}
          </template>
        </el-table-column>

        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.updated_at }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="editBanner(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination
    :total="total"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.limit"
    @pagination="getList" />
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import bannerApi from '@/api/banner'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取banner
    async getList(e) {
      const query = {}
      if(e == undefined) {
        query.page = this.listQuery.page - 1,
        query.limit = this.listQuery.limit
      }
      else {
        query.page = e.page - 1,
        query.limit = e.limit
      }
      const result = await bannerApi.getBanners(query)
      this.list = result.data.rows
      this.total = result.data.count
    },
    // 跳转新增banner
    addBanner() {
      this.$router.push({
        name: 'AddBanner'
      })
    },
    // 跳转编辑
    editBanner(id) {
      this.$router.push({
        name: 'EditBanner',
        params: {id: id}
      })
    }
  },
  inject: ['reload']
}
</script>
<style lang="less" scoped>
  .banner {
    margin: 30px;
    position: relative;
    .add {
      margin-bottom: 20px;
    }
    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
</style>
